import React, { memo } from "react";
import { useSelector } from "react-redux";

import "./index.scss";

import WYThemHeaderNormal from "@/components/theme-header-normal";
import WYAlbumCover from "@/components/album-cover";

const WYHotAlbum = memo(function () {
  const hotAlbums = useSelector((state) =>
    state.getIn(["albums", "hotAlbums"])
  );
  return (
    <div className="wy-hot-album">
      <WYThemHeaderNormal title="热门新碟" />
      <div className="album-list">
        {hotAlbums.length > 0 &&
          hotAlbums
            .slice(0, 10)
            .map((item) => (
              <WYAlbumCover
                key={item.id}
                size={130}
                width={153}
                bgp={-845}
                info={item}
              />
            ))}
      </div>
    </div>
  );
});

export default WYHotAlbum;
